<style>
select { width: 200px; }
</style>
<script type="text/javascript">
 $(document).ready(function(){
	//BASIC
   $("#btn_support").click(function(event){	   
		$.ajax({
		   contentType: 'application/json',
		   type: "POST",
		   url: "/cs_support/enviar/",
		   dataType: 'json',
		   data: (function() {
						var parametros = {};
						var theForm = window.document.supportForm;
						var num_of_elements = theForm.length;
						alert(num_of_elements);
						for (var i=0; i<num_of_elements; i++){
							var theElement = theForm.elements[i];
							var element_type = theElement.type;
							var element_name = theElement.name;
							var element_value = theElement.value;
							if(element_type=="radio"){
								if (theElement.checked==true){
									parametros[element_name]=element_value;
								}
							}else{
								parametros[element_name]=element_value;
								//alert(parametros[element_name]);
							}
						}
						return parametros;
					})(),
		   success: function(resp) {
						var item = resp;						
						var i = 0;
						
						//limpa antes
						var theForm = window.document.registraForm;
						var num_of_elements = theForm.length;
						for (var j=0; j<num_of_elements; j++){
							var theElement = theForm.elements[j];
							var	theElement_erroDiv = $("#"+theElement.name+"_erro");
							if (theElement_erroDiv!=null){
								$("#"+theElement.name+"_erro").html("");
								//alert(theElement.name);
							}
						}
						
					
						for (key in item){
								if (key=="success"){
									//location.href = '/login' //redireciona pra pagina completa
									$.ajax({
									   contentType: 'application/html',
									   type: "POST",
									   url: "/login/",
									   dataType: 'html',
									   success: function(resp) {
													var html_source = resp;	
													//alert(html_source);
													$("#middle_content").html("<div class=\"main-content\">"+html_source+"</div>");
													//return;	
												},
										error: function() {alert('Erro!');},
									 });									
									//$("#sucesso_dialog").show("slow");
									$(function() {
										$("#sucesso_dialog").dialog({
											position: 'center',
											modal: true,
											resizable: false,
											height: 170,
											buttons: {
												Ok: function() {
													$(this).dialog('close');
												}
											}
										});
									});
									//$("#sucesso_dialog" ).dialog( "option", "position", $("#sucesso_dialog").dialog('option','position') );
									return;
								}								
								//alert(item[key]);
								var	theElement_erroDiv = $("#"+key+"_erro");
								if (theElement_erroDiv!=null){
									$("#"+key+"_erro").html("<ul class='errorlist' style='color:red;'>"+String(item[key])+"</ul>");
								}
								i++;
							}
						
					},
			error: function() {
				// Prompt for user data and process the result using a callback:
				//alert('Falha de conexao com o servidor.');
				$("#erro_dialog").dialog({ position: 'center',
											resizable: false });
			},
		 });
   });
 });
</script>
<div id="erro_dialog" title="Erro" style="display: none; ">
<p>Falha na conexao com o servidor.</p>
</div>
<div id="sucesso_dialog" title="Sucesso" style="display: none;">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> 
<span style="padding-top:10px; font-size:16px;font:Verdana, Geneva, sans-serif;">Seu registro foi feito com sucesso.<br/>
Verifique o seu email para ativar sua conta.
</span>
</p>
</div>
  
<!-- Pagetitle -->
<h1 class="pagetitle">Abertura de Chamado:</h1> 
 
<div class="column1-unit"> 
<div class="contactform"> 
<form action="" method="post" id="supportForm" name="supportForm">
<fieldset><legend>&nbsp;*Dados Obrigatórios:&nbsp;</legend> 
         
        <div class="fieldWrapper"> 

            <p>
              <label class="left" for="severidade"><span id="fancy" title="Escolha a severidade do problema."><span class="obrigatorio">*Severidade</span></span></label> 
            <select id="id_severidade" name="severidade">
			  <option value="alta">Alta</option>
			  <option value="media">Média</option>
			  <option value="baixa">Baixa</option>
			</select>
            </p> 
        </div> 
    
        <div class="fieldWrapper"> 

            <p>
              <label class="left" for="assunto"><span id="fancy" title="Qual seria o assunto principal do problema."><span class="obrigatorio">*Assunto</span></span></label> 
			<select id="id_assunto" name="assunto">
			  <option value="logar">Problemas para logar</option>
			  <option value="servidor_cs">Problemas servidor CS</option>
			  <option value="pagamento">Problemas com pagamento</option>
			  <option value="outros">Outros</option>
			</select>
            </p> 
        </div> 

        <div class="fieldWrapper"> 
            
            <div id="email_erro"></div> 
            <p>
              <label class="left" for="email_resposta"><span id="fancy" title="O endereço de email para resposta do chamado."><span class="obrigatorio">*E-mail</span></span></label> 
            {% if user.is_authenticated %}
			<span>{{ user.email }}</span>
			<input id="id_email_resposta" type="hidden" name="email_resposta" value="{{ user.email }}"/>
			{% else %}
			<input id="id_email_resposta" type="text" class="field" name="email_resposta" maxlength="75" />
			{% endif %}
            </p> 
        </div> 
		
        <div class="fieldWrapper"> 

            <p>
              <label class="left" for="descricao"><span id="fancy" title="Descrição do problema."><span class="obrigatorio">*Descrição</span></span></label> 
            <textarea rows="10" cols="20" id="id_descricao" name="descricao">Coloque aqui a descrição do seu problema</textarea>
            </p> 
        </div> 
    
		    
</fieldset>

<p><input class="button" id="btn_support" type="button" value="Abrir Chamado" /></p> 

</form> 
  </div>              
</div> 